import { useState } from 'react';
import { useTheme } from '@/hooks/useTheme';
import { ChevronRight, Clock, Heart, Book, Award, ArrowLeft } from 'lucide-react';
import { useNavigate } from 'react-router-dom';

// 定义瑜伽动作类型
interface YogaPose {
  id: string;
  name: string;
  sanskritName: string;
  category: string;
  difficulty: 'beginner' | 'intermediate' | 'advanced';
  duration: string;
  benefits: string[];
  steps: string[];
  tips: string[];
  image: string;
}

// 定义瑜伽课程类型
interface YogaCourse {
  id: string;
  title: string;
  description: string;
  duration: string;
  level: string;
  poses: YogaPose[];
  image: string;
}

// 瑜伽动作数据
const yogaPoses: YogaPose[] = [
  {
    id: 'mountain-pose',
    name: '山式',
    sanskritName: 'Tadasana',
    category: '站姿',
    difficulty: 'beginner',
    duration: '30-60秒',
    benefits: [
      '改善姿势，增强身体意识',
      '增强腿部和核心力量',
      '改善平衡和稳定性',
      '减轻压力和焦虑',
      '调整呼吸，平静心灵'
    ],
    steps: [
      '双脚并拢站立，脚趾微微分开',
      '膝盖轻微收紧，大腿肌肉向上提升',
      '臀部微微内收，核心肌群收紧',
      '肩膀放松下沉，手臂自然下垂',
      '头部保持中立，目光平视前方',
      '缓慢深呼吸，保持姿势'
    ],
    tips: [
      '想象有一根绳子从头顶向上牵引',
      '保持膝盖柔软，避免过度伸直',
      '肩膀远离耳朵，保持放松状态',
      '感受身体的对称和平衡'
    ],
    image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=yoga%20mountain%20pose%20tadasana%20correct%20form&sign=432f719a5d2d852ac212c09984cdf76b'
  },
  {
    id: 'downward-facing-dog',
    name: '下犬式',
    sanskritName: 'Adho Mukha Svanasana',
    category: '倒置',
    difficulty: 'beginner',
    duration: '30-60秒',
    benefits: [
      '拉伸背部、腿后肌群和肩膀',
      '增强手臂、腿部和核心力量',
      '改善血液循环，缓解疲劳',
      '平静神经系统，减轻压力',
      '帮助缓解头痛和失眠'
    ],
    steps: [
      '从四肢着地的姿势开始',
      '双手与肩同宽，手指分开指向前方',
      '膝盖与臀部同宽，脚尖踩地',
      '呼气，将臀部向上抬起，形成倒V形',
      '保持手臂和腿部伸直，但膝盖可以微屈',
      '脚跟尽量贴地，头部放松自然下垂'
    ],
    tips: [
      '如果感到手腕压力过大，可以使用瑜伽砖支撑',
      '保持核心收紧，避免腰部下垂',
      '可以通过弯曲膝盖来更好地拉伸腿后侧',
      '保持呼吸均匀，不要憋气'
    ],
    image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=yoga%20downward%20facing%20dog%20adho%20mukha%20svanasana&sign=84abdc7024ee8e0fd79a224e4efcc6cd'
  },
  {
    id: 'warrior-ii',
    name: '战士二式',
    sanskritName: 'Virabhadrasana II',
    category: '站姿',
    difficulty: 'intermediate',
    duration: '30-45秒/侧',
    benefits: [
      '增强腿部、臀部和核心力量',
      '拉伸大腿内侧和外侧肌肉',
      '改善平衡和专注能力',
      '打开胸腔，增强心肺功能',
      '培养勇气和意志力'
    ],
    steps: [
      '双脚分开约一腿长的距离',
      '右脚向右转90度，左脚稍微内扣',
      '弯曲右膝，使大腿与地面平行',
      '双臂向两侧伸展，与肩膀同高',
      '右手指向右脚趾方向，左手指向相反方向',
      '保持身体稳定，目光注视右手'
    ],
    tips: [
      '确保膝盖不超过脚踝，保持在脚尖正上方',
      '保持上半身直立，避免前倾',
      '感受双腿的力量和稳定性',
      '保持呼吸均匀，不要屏气'
    ],
    image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=yoga%20warrior%20ii%20virabhadrasana%20ii%20pose&sign=9a27e5f7ed6c6e740a1f84277b21d961'
  },
  {
    id: 'tree-pose',
    name: '树式',
    sanskritName: 'Vrksasana',
    category: '平衡',
    difficulty: 'intermediate',
    duration: '30-60秒/侧',
    benefits: [
      '增强平衡能力和专注力',
      '强化腿部和脚踝肌肉',
      '改善姿势，纠正体态',
      '培养内心平静和专注力',
      '拉伸大腿内侧和胸部'
    ],
    steps: [
      '山式站立，双脚并拢',
      '将重心移到左腿，弯曲右腿',
      '将右脚掌放在左大腿内侧或小腿上',
      '双手在胸前合十，然后慢慢举过头顶',
      '保持呼吸均匀，目光固定在前方一点',
      '保持身体稳定和平衡'
    ],
    tips: [
      '如果平衡困难，可以将脚放在膝盖以下，避免放在膝盖上',
      '使用墙壁或椅子辅助练习',
      '保持核心收紧，帮助维持平衡',
      '保持面部放松，呼吸均匀'
    ],
    image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=yoga%20tree%20pose%20vrksasana%20balance%20exercise&sign=169042332d6b2890e3d78ba5a6013f1a'
  },
  {
    id: 'cobra-pose',
    name: '眼镜蛇式',
    sanskritName: 'Bhujangasana',
    category: '后弯',
    difficulty: 'beginner',
    duration: '20-30秒',
    benefits: [
      '拉伸胸部、肩膀和腹部',
      '增强背部肌肉，改善姿势',
      '刺激腹部器官，促进消化',
      '缓解轻度抑郁和疲劳',
      '打开心轮，培养积极情绪'
    ],
    steps: [
      '俯卧在瑜伽垫上，双脚并拢',
      '双手放在胸部两侧，指尖向前',
      '吸气，用手臂力量将上半身抬起',
      '保持耻骨贴地，肚脐远离地面',
      '头部微微后仰，肩膀放松下沉',
      '保持姿势，缓慢呼吸'
    ],
    tips: [
      '避免用手臂过度用力，让背部肌肉参与',
      '保持手肘微屈，避免完全伸直',
      '如果腰部有不适，可以减少抬升幅度',
      '想象胸部向前向上延伸，而不是头部向后'
    ],
    image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=yoga%20cobra%20pose%20bhujangasana%20correct%20form&sign=5b537657c70a1f0bab48ea3ab89a200d'
  }
];

// 瑜伽课程数据
const yogaCourses: YogaCourse[] = [
  {
    id: 'morning-yoga',
    title: '晨间唤醒瑜伽',
    description: '通过温和的动作唤醒身体，激活能量，为一天做好准备。这个课程适合早晨练习，帮助你提升精神状态，增强活力。',
    duration: '20分钟',
    level: '初级',
    poses: [
      yogaPoses.find(pose => pose.id === 'mountain-pose')!,
      yogaPoses.find(pose => pose.id === 'downward-facing-dog')!,
      yogaPoses.find(pose => pose.id === 'warrior-ii')!
    ],
    image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=morning%20yoga%20practice%20sunrise%20outdoors&sign=5a054c9f89f3bf05fd86af828f8103e6'
  },
  {
    id: 'evening-relaxation',
    title: '晚间放松瑜伽',
    description: '通过舒缓的动作释放一天的紧张和压力，帮助身体和心灵放松，为良好的睡眠做准备。',
    duration: '30分钟',
    level: '初级到中级',
    poses: [
      yogaPoses.find(pose => pose.id === 'downward-facing-dog')!,
      yogaPoses.find(pose => pose.id === 'cobra-pose')!
    ],
    image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=evening%20yoga%20relaxation%20practice%20indoors&sign=e74c92573504f2c841468e7c124716a1'
  },
  {
    id: 'core-strength',
    title: '核心力量瑜伽',
    description: '专注于增强核心肌群的力量和稳定性，改善姿势，增强身体控制力。',
    duration: '25分钟',
    level: '中级',
    poses: [
      yogaPoses.find(pose => pose.id === 'mountain-pose')!,
      yogaPoses.find(pose => pose.id === 'tree-pose')!,
      yogaPoses.find(pose => pose.id === 'warrior-ii')!
    ],
    image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=yoga%20core%20strength%20workout%20practice&sign=9add994dfd9a9ee3e85989208a662b0c'
  }
];

export default function YogaShapingGuide() {
  const { theme } = useTheme();
  const [activeCategory, setActiveCategory] = useState<string>('all');
  const [expandedPose, setExpandedPose] = useState<string | null>(null);
  const [expandedCourse, setExpandedCourse] = useState<string | null>(null);
  const navigate = useNavigate();
  
  // 过滤瑜伽动作
  const filteredPoses = activeCategory === 'all' 
    ? yogaPoses 
    : yogaPoses.filter(pose => pose.category.toLowerCase() === activeCategory.toLowerCase());
  
  // 切换动作详情
  const togglePose = (poseId: string) => {
    setExpandedPose(expandedPose === poseId ? null : poseId);
  };
  
  // 切换课程详情
  const toggleCourse = (courseId: string) => {
    setExpandedCourse(expandedCourse === courseId ? null : courseId);
  };
  
  // 获取难度对应的颜色和文本
  const getDifficultyInfo = (difficulty: YogaPose['difficulty']) => {
    switch(difficulty) {
      case 'beginner':
        return { color: 'bg-green-100 dark:bg-green-900/50 text-green-600 dark:text-green-400', text: '初级' };
      case 'intermediate':
        return { color: 'bg-blue-100 dark:bg-blue-900/50 text-blue-600 dark:text-blue-400', text: '中级' };
      case 'advanced':
        return { color: 'bg-orange-100 dark:bg-orange-900/50 text-orange-600 dark:text-orange-400', text: '高级' };
      default:
        return { color: 'bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300', text: '初级' };
    }
  };

  return (
    <div className={`min-h-screen flex flex-col ${theme === 'dark' ? 'dark bg-slate-900 text-white' : 'bg-white text-slate-900'}`}>
      {/* 导航栏 */}
      <header className="sticky top-0 z-40 bg-white/90 dark:bg-slate-900/90 backdrop-blur-md shadow-md">
        <div className="container mx-auto px-4 py-4 flex items-center">
          <button 
            onClick={() => navigate(-1)} 
            className="mr-4 p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
          >
            <ArrowLeft size={20} />
          </button>
          <h1 className="text-xl font-bold bg-gradient-to-r from-green-600 to-purple-500 bg-clip-text text-transparent">
            瑜伽塑形指南
          </h1>
        </div>
      </header>

      <main className="flex-grow">
        {/* 介绍区域 */}
        <section className="py-8 bg-gradient-to-br from-green-50 via-white to-purple-50 dark:from-green-900/30 dark:via-slate-900 dark:to-purple-900/30">
          <div className="container mx-auto px-4">
            <div className="max-w-3xl mx-auto text-center">
              <h2 className="text-2xl md:text-3xl font-bold mb-4">通过瑜伽塑造完美体态</h2>
              <p className="text-slate-600 dark:text-slate-300 mb-6">
                瑜伽是一种古老而有效的身心锻炼方式，通过各种姿势和呼吸技巧，不仅能增强身体柔韧性和力量，
                还能改善姿势，塑造优美体态，同时缓解压力，提升内心平静。本指南将帮助你了解瑜伽的基本姿势和课程，
                开始你的瑜伽塑形之旅。
              </p>
              
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 max-w-lg mx-auto">
                <div className="bg-white dark:bg-slate-800 rounded-xl p-4 shadow-md">
                  <div className="w-12 h-12 rounded-full bg-green-100 dark:bg-green-900/50 flex items-center justify-center mx-auto mb-3">
                    <Heart size={24} className="text-green-600 dark:text-green-400" />
                  </div>
                  <h3 className="font-semibold mb-1">身心平衡</h3>
                  <p className="text-xs text-slate-500 dark:text-slate-400">
                    提升身体柔韧性和力量，同时平静心灵
                  </p>
                </div>
                
                <div className="bg-white dark:bg-slate-800 rounded-xl p-4 shadow-md">
                  <div className="w-12 h-12 rounded-full bg-purple-100 dark:bg-purple-900/50 flex items-center justify-center mx-auto mb-3">
                    <Book size={24} className="text-purple-600 dark:text-purple-400" />
                  </div>
                  <h3 className="font-semibold mb-1">正确姿势</h3>
                  <p className="text-xs text-slate-500 dark:text-slate-400">
                    改善不良体态，塑造优美线条
                  </p>
                </div>
                
                <div className="bg-white dark:bg-slate-800 rounded-xl p-4 shadow-md">
                  <div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center mx-auto mb-3">
                    <Award size={24} className="text-blue-600 dark:text-blue-400" />
                  </div>
                  <h3 className="font-semibold mb-1">健康生活</h3>
                  <p className="text-xs text-slate-500 dark:text-slate-400">
                    减轻压力，提高睡眠质量，增强整体健康
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* 瑜伽动作区域 */}
        <section className="py-10">
          <div className="container mx-auto px-4">
            <h2 className="text-2xl font-bold mb-8 text-center">瑜伽基本姿势</h2>
            
            {/* 动作分类 */}
            <div className="flex overflow-x-auto pb-4 mb-8 gap-2 md:flex-wrap md:justify-center">
              <button
                onClick={() => setActiveCategory('all')}
                className={`px-4 py-2 rounded-full whitespace-nowrap transition-all duration-300 ${
                  activeCategory === 'all'
                    ? 'bg-green-600 text-white shadow-lg shadow-green-500/20'
                    : 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700'
                }`}
              >
                全部姿势
              </button>
              <button
                onClick={() => setActiveCategory('站姿')}
                className={`px-4 py-2 rounded-full whitespace-nowrap transition-all duration-300 ${
                  activeCategory === '站姿'
                    ? 'bg-green-600 text-white shadow-lg shadow-green-500/20'
                    : 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700'
                }`}
              >
                站姿
              </button>
              <button
                onClick={() => setActiveCategory('平衡')}
                className={`px-4 py-2 rounded-full whitespace-nowrap transition-all duration-300 ${
                  activeCategory === '平衡'
                    ? 'bg-green-600 text-white shadow-lg shadow-green-500/20'
                    : 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700'
                }`}
              >
                平衡
              </button>
              <button
                onClick={() => setActiveCategory('倒置')}
                className={`px-4 py-2 rounded-full whitespace-nowrap transition-all duration-300 ${
                  activeCategory === '倒置'
                    ? 'bg-green-600 text-white shadow-lg shadow-green-500/20'
                    : 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700'
                }`}
              >
                倒置
              </button>
              <button
                onClick={() => setActiveCategory('后弯')}
                className={`px-4 py-2 rounded-full whitespace-nowrap transition-all duration-300 ${
                  activeCategory === '后弯'
                    ? 'bg-green-600 text-white shadow-lg shadow-green-500/20'
                    : 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700'
                }`}
              >
                后弯
              </button>
            </div>
            
            {/* 动作列表 */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-5xl mx-auto">
              {filteredPoses.map((pose) => {
                const difficultyInfo = getDifficultyInfo(pose.difficulty);
                return (
                  <div 
                    key={pose.id}
                    className={`rounded-xl overflow-hidden transition-all duration-300 ${
                      expandedPose === pose.id 
                        ? 'ring-2 ring-green-500 dark:ring-green-400' 
                        : 'bg-white dark:bg-slate-800 shadow-lg hover:shadow-xl'
                    }`}
                  >
                    <div 
                      className="flex flex-col md:flex-row cursor-pointer"
                      onClick={() => togglePose(pose.id)}
                    >
                      <div className="md:w-1/3">
                        <img 
                          src={pose.image} 
                          alt={pose.name}
                          className="w-full h-48 object-cover"
                        />
                      </div>
                      <div className="p-5 md:w-2/3">
                        <div className="flex justify-between items-start mb-2">
                          <h3 className="text-lg font-semibold">{pose.name}</h3>
                          <span className={`px-2 py-1 rounded-full text-xs font-medium ${difficultyInfo.color}`}>
                            {difficultyInfo.text}
                          </span>
                        </div>
                        <p className="text-sm text-slate-500 dark:text-slate-400 mb-3">
                          {pose.sanskritName} · {pose.category} · {pose.duration}
                        </p>
                        <div className="flex items-center text-sm text-slate-600 dark:text-slate-300 mb-3">
                          <Heart size={16} className="mr-1 text-pink-500" />
                          <span>主要益处: {pose.benefits[0]}</span>
                        </div>
                      </div>
                    </div>
                    
                    {/* 展开内容 */}
                    {expandedPose === pose.id && (
                      <div className="p-5 border-t border-slate-200 dark:border-slate-700">
                        <div className="space-y-4">
                          <div>
                            <h4 className="flex items-center font-medium mb-2">
                              <Book size={16} className="mr-2 text-green-600 dark:text-green-400" />
                              动作步骤
                            </h4>
                            <ol className="list-decimal list-inside space-y-2 text-slate-600 dark:text-slate-300">
                              {pose.steps.map((step, index) => (
                                <li key={index}>{step}</li>
                              ))}
                            </ol>
                          </div>
                          
                          <div>
                            <h4 className="flex items-center font-medium mb-2">
                              <Award size={16} className="mr-2 text-green-600 dark:text-green-400" />
                              练习要点
                            </h4>
                            <ul className="list-disc list-inside space-y-2 text-slate-600 dark:text-slate-300">
                              {pose.tips.map((tip, index) => (
                                <li key={index}>{tip}</li>
                              ))}
                            </ul>
                          </div>
                          
                          <div>
                            <h4 className="flex items-center font-medium mb-2">
                              <Heart size={16} className="mr-2 text-green-600 dark:text-green-400" />
                              健康益处
                            </h4>
                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                              {pose.benefits.map((benefit, index) => (
                                <div key={index} className="flex items-start">
                                  <i className="fa-solid fa-check-circle mt-1 mr-2 text-green-500"></i>
                                  <span className="text-slate-600 dark:text-slate-300 text-sm">{benefit}</span>
                                </div>
                              ))}
                            </div>
                          </div>
                        </div>
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          </div>
        </section>
        
        {/* 瑜伽课程区域 */}
        <section className="py-10 bg-slate-50 dark:bg-slate-800/50">
          <div className="container mx-auto px-4">
            <h2 className="text-2xl font-bold mb-8 text-center">推荐瑜伽课程</h2>
            
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
              {yogaCourses.map((course) => (
                <div 
                  key={course.id}
                  className={`rounded-xl overflow-hidden transition-all duration-300 ${
                    expandedCourse === course.id 
                      ? 'ring-2 ring-purple-500 dark:ring-purple-400' 
                      : 'bg-white dark:bg-slate-800 shadow-lg hover:shadow-xl'
                  }`}
                >
                  <div 
                    className="cursor-pointer"
                    onClick={() => toggleCourse(course.id)}
                  >
                    <div className="relative">
                      <img 
                        src={course.image} 
                        alt={course.title}
                        className="w-full h-48 object-cover"
                      />
                      <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent p-4">
                        <h3 className="text-lg font-semibold text-white">{course.title}</h3>
                      </div>
                    </div>
                    <div className="p-5">
                      <div className="flex items-center justify-between mb-3">
                        <div className="flex items-center">
                          <Clock size={16} className="mr-1 text-purple-500" />
                          <span className="text-sm text-slate-600 dark:text-slate-300">{course.duration}</span>
                        </div>
                        <span className="px-2 py-1 rounded-full bg-purple-100 dark:bg-purple-900/50 text-purple-600 dark:text-purple-400 text-xs font-medium">
                          {course.level}
                        </span>
                      </div>
                      <p className="text-slate-600 dark:text-slate-300 text-sm mb-4 line-clamp-2">
                        {course.description}
                      </p>
                      <div className="flex items-center text-sm text-slate-500 dark:text-slate-400">
                        <span>{course.poses.length} 个动作</span>
                      </div>
                    </div>
                  </div>
                  
                  {/* 展开内容 */}
                  {expandedCourse === course.id && (
                    <div className="p-5 border-t border-slate-200 dark:border-slate-700">
                      <h4 className="font-medium mb-3">课程动作安排</h4>
                      <div className="space-y-4">
                        {course.poses.map((pose, index) => (
                          <div key={pose.id} className="flex items-center p-3 bg-slate-50 dark:bg-slate-700/50 rounded-lg">
                            <div className="w-8 h-8 rounded-full bg-purple-100 dark:bg-purple-900/50 flex items-center justify-center mr-3 flex-shrink-0">
                              <span className="text-purple-600 dark:text-purple-400 font-medium">{index + 1}</span>
                            </div>
                            <div>
                              <h5 className="font-medium">{pose.name} ({pose.sanskritName})</h5>
                              <p className="text-xs text-slate-500 dark:text-slate-400">{pose.duration}</p>
                            </div>
                          </div>
                        ))}
                      </div>
                      
                      <button className="mt-6 w-full py-3 rounded-lg bg-purple-600 text-white font-medium hover:bg-purple-700 transition-colors">
                        开始练习
                      </button>
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>
        </section>
        
        {/* 瑜伽小贴士 */}
        <section className="py-10">
          <div className="container mx-auto px-4">
            <div className="max-w-3xl mx-auto">
              <h2 className="text-2xl font-bold mb-8 text-center">瑜伽练习小贴士</h2>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-md">
                  <div className="w-12 h-12 rounded-full bg-green-100 dark:bg-green-900/50 flex items-center justify-center mb-4">
                    <Book size={20} className="text-green-600 dark:text-green-400" />
                  </div>
                  <h3 className="font-semibold mb-2">练习前准备</h3>
                  <ul className="list-disc list-inside space-y-1 text-sm text-slate-600 dark:text-slate-300">
                    <li>穿着舒适、宽松的衣服，让身体可以自由活动</li>
                    <li>选择安静、干净、通风的练习环境</li>
                    <li>在空腹或饭后2小时进行练习</li>
                    <li>准备一块瑜伽垫，提供缓冲和防滑</li>
                    <li>练习前进行简单的热身活动</li>
                  </ul>
                </div>
                
                <div className="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-md">
                  <div className="w-12 h-12 rounded-full bg-green-100 dark:bg-green-900/50 flex items-center justify-center mb-4">
                    <Heart size={20} className="text-green-600 dark:text-green-400" />
                  </div>
                  <h3 className="font-semibold mb-2">练习中注意事项</h3>
                  <ul className="list-disc list-inside space-y-1 text-sm text-slate-600 dark:text-slate-300">
                    <li>保持呼吸均匀、自然，不要憋气</li>
                    <li>尊重自己的身体极限，不要强迫做出疼痛的姿势</li>
                    <li>保持专注，关注身体的感受和呼吸</li>
                    <li>如果有慢性疾病或受伤，避免做不适合的动作</li>
                    <li>练习中保持微笑，放松面部表情</li>
                  </ul>
                </div>
                
                <div className="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-md">
                  <div className="w-12 h-12 rounded-full bg-green-100 dark:bg-green-900/50 flex items-center justify-center mb-4">
                    <Award size={20} className="text-green-600 dark:text-green-400" />
                  </div>
                  <h3 className="font-semibold mb-2">练习后保养</h3>
                  <ul className="list-disc list-inside space-y-1 text-sm text-slate-600 dark:text-slate-300">
                    <li>练习后进行5-10分钟的放松和冥想</li>
                    <li>及时补充水分，保持身体水分平衡</li>
                    <li>避免立即洗澡或进食，等待15-30分钟</li>
                    <li>记录练习感受和进步，调整练习计划</li>
                    <li>保证充足的睡眠，促进身体恢复</li>
                  </ul>
                </div>
                
                <div className="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-md">
                  <div className="w-12 h-12 rounded-full bg-green-100 dark:bg-green-900/50 flex items-center justify-center mb-4">
                    <Clock size={20} className="text-green-600 dark:text-green-400" />
                  </div>
                  <h3 className="font-semibold mb-2">频率与坚持</h3>
                  <ul className="list-disc list-inside space-y-1 text-sm text-slate-600 dark:text-slate-300">
                    <li>初学者建议每周练习3-4次，每次20-30分钟</li>
                    <li>随着经验增加，可以逐渐增加练习时间和频率</li>
                    <li>保持规律性，将瑜伽融入日常生活</li>
                    <li>不要急于求成，瑜伽是一个循序渐进的过程</li>
                    <li>享受练习过程，而不仅仅关注结果</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>

      {/* 页脚 */}
      <footer className="bg-slate-900 text-white py-6">
        <div className="container mx-auto px-4 text-center">
          <p className="text-slate-400 text-sm">
            © {new Date().getFullYear()} FitMaster 瑜伽塑形指南 | 专业健身知识教学平台
          </p>
        </div>
      </footer>
    </div>
  );
}